@import "_calendar_variables";

.#{$namespace}calendarSynoptic
{
	th
	{
		text-align: center;
	}

	.sectionContainerNav
	{
		tr
		{
			@include display-flex;
			@include justify-content(space-between);
			@include flex-wrap(wrap);
		}

		td
		{
			@include display-flex;
			@include align-items(center);
		}
		
		.todayButton {
			margin: 0 $standard-space;
		}
	}

	.calLeft 
	{
		vertical-align: middle;
		text-align: left;
		width: 50%;
	}

	.calRight
	{
		@include display-flex;
		@include justify-content(flex-end);
		vertical-align: middle;
		text-align: right;

		span
		{
			display: block;
			white-space: nowrap;
			text-align: right;
		}
	}

	.calRight fieldset 
	{
		display:inline;
		margin:0;
		padding:0;
	}

	.calRight legend 
	{
		position: absolute !important;
		display:inline;
		margin:0;
		padding:0;
		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
		clip: rect(1px, 1px, 1px, 1px);
	}

	.calTop 
	{
		vertical-align: top;
	}

	.mainCalendar
	{
		width: 100%;
		border-collapse: collapse;
		text-align: center;
	}

	.calHeader 
	{
		text-align: center;
		font-weight: normal;
		color: $calendar-column-heading-color;
		line-height: $calendar-table-header-line-height;
	}

	.calDay
	{
		width: 14%;
		line-height: 3;		// trying to make the cell square-ish
		margin: 0;
		padding: 0;
		border: 1px solid transparent;		// to space out the cells

		> span
		{
			position: relative;
			@include display-flex;
			@include justify-content(center);
			@include align-items(center);
			width: 100%;
			height: 100%;
			border: 1px solid $calendar-day-border-color;	// to style the cell borders
			text-align: center;
			
			&.calOtherDayWithNoActivity, &.calOtherDayWithActivity {
				border: 0 none;		// to distinguish current month days from non-current month days
			}
		}

		.calToday 			// today without events
		{
			background-color: $calendar-day-today-background-color;
			color: $calendar-day-today-text-color;

			a
			{
				color: $calendar-day-today-text-color;
			}

			&.calSelectedDay		//today selected without activity
			{
				border: 1px solid $calendar-day-today-text-color;
			}
		}

		.calDayWithActivity, .calOtherDayWithActivity
		{
			// background-color will be overriden if:
			// 1. colors specified for high/medium/low priority events in Options (user preferences)
			// 2. default colors specified in sakai.properties
			background-color: $calendar-event-background-color;
			text-align: center;
			
			&::after {
				content: "";
				@include eventIndicator();
			}

			a
			{
				width: 100%;		// to maximize click area
				height: 100%;
				color: $calendar-event-text-color;
				text-decoration: none;

				&:hover, &:focus
				{
					outline-offset: -#{$focus-outline-offset};
					text-decoration: none;
				}
				
				&:hover {
					margin: -1px; 	// to prevent border jitter
					border: 1px solid var(--link-color);
				}
			}

			&.calSelectedDay a
			{
				margin: -1px; 	// to prevent border jitter
				border: 1px solid $calendar-event-border-color;
			}

			&.calToday 			//today with events
			{
				background-color: $calendar-today-event-background-color;

				a
				{
					color: $calendar-today-event-text-color;
				}

				&.calSelectedDay		//today selected with activity
				{
					border-color: $calendar-today-event-text-color;
					border-left: 0 none;	// removing side borders to avoid double thickness caused by the -1px margin from above (.calSelectedDay a) not applying to the sides
					border-right: 0 none;
				}
			}
		}
	}

	.calDayWithoutActivity 
	{
		text-align: center;
	}

	#prefsForm
	{
		width: 99%;
	}
	
	.calendarEventListContainer 
	{
		display: block;
		width: 100%;
		margin-top: $standard-spacing;
		
		h4 {
			margin: $standard-spacing 0;
			padding: 0;
		}
	}

	.calendarEventList
	{
		width: 100%;

		td
		{
			line-height: 2;
		}

		span.icon
		{
			margin-right: $standard-space;
		}
	}
}
